<template>
  <!-- 点击详情 -->
  <div>
    <el-card class="box-card" v-for="item in movieinfo" :key="item.id">
      <img :src="basurl + item.url" alt="图片" />
      <div class="date">
        <h1>{{ item.name }}</h1>
        <el-rate
          class="rate"
          v-model="value"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
        >
        </el-rate>
        <h4><span>地区:</span> {{ item.area }}</h4>
        <p><span class="el-icon-edit">分类:</span> {{ item.classify }}</p>
        <p><span class="el-icon-s-check">导演:</span> {{ item.director }}</p>
        <p><span class="el-icon-date">年份:</span> {{ item.year }}</p>
        <p class="text">
          <span>剧情:</span>
          {{ item.plot }}
        </p>
      </div>
    </el-card>
    <div class="nav">
      <ul>
        <li
          v-for="(item, index) in nav"
          :key="index"
          @click="jump(index)"
          :class="{ on: index == ison }"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <router-view name="nav"></router-view>
  </div>
</template>

<script>
import { getmovie } from "@/api/index";
export default {
  data() {
    return {
      value: 0,
      nav: ["作品详情", "评论", "相关作品"],
      ison: 0,
      id: sessionStorage.getItem("id"),
      movieinfo: [],
      basurl: "http://127.0.0.1:7001",
    };
  },
  watch: {
    $route() {
      this.getdata();
      if (this.$route.path == "/details") {
        this.$router.push("/present");
      }
    },
  },
  created() {
    this.$router.push("/present");
    this.getdata();
  },

  methods: {
    jump(index) {
      this.ison = index;
      if (index == 0) {
        this.$router.push("/present");
      } else if (index == 1) {
        this.$router.push("/comments");
      } else {
        this.$router.push("/relate");
      }
    },
    getdata() {
      getmovie(sessionStorage.getItem("id")).then((res) => {
        this.movieinfo = res.data;
        //console.log(this.movieinfo);
        this.value = this.movieinfo[0].score;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 1200px;
  margin: 20px auto 0;
  padding-bottom: 20px;
  img,
  .date {
    float: left;
    position: relative;
  }
  img {
    width: 240px;
    height: 350px;
    object-fit: cover;
  }
  .date {
    margin-left: 20px;
    width: 900px;
    h1 {
      color: #303133;
    }
    .rate {
      position: absolute;
      left: 600px;
    }
    h4 {
      margin-top: 20px;
      color: #606266;
    }
    p {
      color: #909399;
      margin-top: 20px;
    }
    .text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .btn {
      margin-top: 55px;
    }
  }
}
.on {
  color: #1e7dd7;
  border-bottom: 2px solid #1e7dd7;
}
.nav {
  width: 1200px;
  height: 50px;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 10px;
  ul {
    width: 1200px;
    list-style: none;
    margin: 0 auto;
    li {
      width: 100px;
      text-align: center;
      line-height: 50px;
      float: left;
      cursor: pointer;
      &:hover {
        color: #1e7dd7;
        border-bottom: 2px solid #1e7dd7;
      }
    }
  }
}
</style>